<template>
    <div class="eval">
        <div class="eval-content">
            <div id="eval-content-first"></div>
            <div id="eval-content-second">
                <h1>学习计划</h1>
                <ul>
                    <li v-for="(plan, index) in plans" :key="plan"><el-link
                            @click="dialogVisible = true, everyDialog(index)">{{ plan }}</el-link>
                    </li>
                </ul>
            </div>
        </div>

        <el-dialog :visible.sync="dialogVisible" width="30%">
            <span class="dialog-banner"><el-link class="elLinkBigger" @click="linkRecord">{{ dialogBanner
            }}</el-link></span>
            <div class="dialog-tag">
                <ul>
                    <li v-for="tag in tags" :key="tag">{{ tag }}</li>
                </ul>
            </div>
            <div class="dialog-info">{{ dialogInfo }}</div>
            <!-- 收藏button -->
            <el-button class="dialog-collection" :icon="Collection" circle @click="toggleCollection"></el-button>
            <el-button class="dialog-record" v-if="showRecordButton" :icon="Record" circle
                @click="toggleRecord"></el-button>

            <div class="dialog-divide"></div>


            <div class="dialog-rate">
                <span class="demonstration">为CodePilot的推荐打分：</span>
                <el-rate v-model="rate" :allow-half="true">
                </el-rate>
            </div>

            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false, submitRate()">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
import * as echarts from 'echarts'
import { getStatisticsForEvaluation } from '@/utils/useful'
import { createCollection } from '@/api/collection'
import { getRecommendList } from '@/api/recommend'
import { getProInfoFromUid } from '@/utils/useful';
import { getStatisticsForHome } from '@/utils/useful';
import { isCollection } from '@/utils/useful';
import { isRecord } from '@/utils/useful';
import { createRecord } from '@/api/record'
import { deleteCollection } from '@/api/collection'
import { doneRecord } from '@/api/record'
import { getUserInfo } from '@/api/user';
import { judgeTime } from '@/utils/useful';
import { getProUid } from '@/utils/useful';
import { getTime } from '@/utils/useful'


export default {
    data() {
        return {
            plans: [],
            plansInfo: [],
            charKey: [],
            chartValue: [],
            total: null,
            dialogVisible: false,
            dialogBanner: '',
            tags: [],
            dialogInfo: '',
            Collection: "",
            rate: 0,
            Record: '',
            showRecordButton: false,
            problemUid: null,
        }
    },
    mounted() {
        Promise.all([
            getStatisticsForEvaluation(),
            getRecommendList("customized")
        ])
            .then(async (results) => {
                const customizedRes = Object.values(results[1].data.problemList);

                const difficultyMapping = {
                    "Medium": "中等",
                    "Easy": "简单",
                    "Hard": "困难",
                    "very easy": "简单",
                    "little easy": "简单",
                    "regular": "中等",
                    "little hard": "困难",
                    "very hard": "困难",
                };

                let d = '';
                const promises = [];

                for (var i = 0; i < customizedRes.length && i < 15; i++) {
                    promises.push(getProInfoFromUid(customizedRes[i])
                        .then((proInfo) => {
                            d = difficultyMapping[proInfo.difficulty] || '';
                            proInfo.difficulty = d;
                            this.plansInfo.push(proInfo);
                            this.plans.push(proInfo.source + ":" + proInfo.title);
                        }));
                }

                console.log(results[0])
                this.charKey = results[0].k
                this.chartValue = results[0].v
                this.total = results[0].total
                this.chart = echarts.init(document.getElementById('eval-content-first'))

                let chartData = {
                    color: [
                        '#FFEACE',
                    ],
                    radar: {
                        // shape: 'circle',
                        indicator: [
                            { name: this.charKey[0], max: this.total },
                            { name: this.charKey[1], max: this.total },
                            { name: this.charKey[2], max: this.total },
                            { name: this.charKey[3], max: this.total },
                            { name: this.charKey[4], max: this.total },
                            { name: this.charKey[5], max: this.total }
                        ],
                        name: {
                            textStyle: {
                                fontSize: 22, // 调大字体大小
                                color: "#9A6F4A",
                            },
                        },
                        axisLine: {
                            lineStyle: {
                                width: 2, // 加粗线条宽度
                                color: "#ede9e4",
                            },
                        },
                        axisLabel: {
                            fontSize: 12, // 调大字体大小
                        },
                    },
                    series: [
                        {
                            name: 'Eval',
                            type: 'radar',
                            data: [
                                {
                                    value: this.chartValue,
                                    name: 'Eval',
                                    lineStyle: {
                                        width: 4, // 改变数据线的粗细
                                        color: "#D26B00",
                                    },
                                }
                            ]
                        }
                    ]
                };

                this.chart.setOption(chartData);
                await Promise.all(promises);
            })
            .catch((error) => {
                console.error(error);
            });
    },
    methods: {
        submitRate() {
            console.log(this.rate)
        },
        toggleCollection() {
            console.log(this.problemUid)

            if (this.Collection === "el-icon-star-off") {
                this.Collection = "el-icon-star-on"
                createCollection(null, this.problemUid, "").then((res) => {
                    // console.log(res.data)
                    console.log("create")
                });
            }
            else {
                this.Collection = "el-icon-star-off"
                deleteCollection(this.problemUid).then((res) => {
                    console.log("delete")
                })
            }
        },
        toggleRecord() {
            if (this.Record === "el-icon-goods") {
                this.Record = 'el-icon-s-goods'
                doneRecord(this.problemUid, 0, getTime(), "done").then((res) => {
                    console.log(res.data)
                });
            }
            else { }
        },
        async everyDialog(index, two) {
            let array
            let arrayInfo
            array = this.plans
            arrayInfo = this.plansInfo

            this.tags.length = 0

            console.log(arrayInfo[index])
            console.log(arrayInfo[index].description)
            this.dialogBanner = array[index];
            this.dialogInfo = arrayInfo[index].description;
            this.externalUrl = arrayInfo[index].url;
            // this.problemUid = arrayInfo[index].id
            this.tags.push(arrayInfo.difficulty)
            //标签
            // console.log(this.tags)
            if (this.tags[0] === '' || this.tags[0] === undefined) {
                this.tags.length = 0
            }

            this.problemUid = await getProUid(arrayInfo[index].source, arrayInfo[index].id);

            let c = isCollection(this.problemUid)

            c.then((value) => {
                if (value === true) {
                    this.Collection = "el-icon-star-on"
                }
                else {
                    this.Collection = "el-icon-star-off"
                }
            })

            let temp = this.problemUid;
            let t = isRecord(temp);
            // console.log(t)

            t.then((value) => {
                if (value === 1) {
                    this.showRecordButton = false;
                } else if (value === 2) {
                    this.showRecordButton = true;
                    this.Record = 'el-icon-s-goods';
                } else if (value === 3) {
                    this.showRecordButton = true;
                    this.Record = 'el-icon-goods';
                } else {
                    console.log("error: isRecord");
                }
            });
        },
        linkRecord() {
            createRecord(this.problemUid).then((res) => {
                window.location.href = this.externalUrl;
            })
        },
    }
}
</script>

<style lang="scss">
.eval {
    width: 1200px;
    margin: 0 auto;

    .eval-content {
        display: flex;
        justify-content: space-between;
        margin-top: -10px;

        #eval-content-first {
            width: 680px;
            height: 600px;
            border-radius: 30px;
            background-image: linear-gradient(180deg, rgb(253, 198, 135), rgb(249, 160, 83));
            backdrop-filter: blur(15px);
            box-shadow: 0 8px 15px 0 rgb(0 0 0 / 20%);
        }

        #eval-content-second {
            width: 500px;
            height: 596px;
            border-radius: 30px;
            border: 2px dotted #ff9000;
            text-align: left;

            h1 {
                font-size: 32px;
                color: #633E1C;
                margin-top: 20px;
                margin-left: 15px;
            }

            ul {
                margin-top: 6px;
                margin-left: 18px;
            }

            li {
                height: 35px;
                font-size: 20px;
                line-height: 35px;
            }

            .el-link {
                color: #865E2A;
                //溢出
                display: block;
                font-size: 20px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }

            a:hover {
                text-decoration: underline;
            }
        }
    }
}
</style>